<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue</title>
  <script src='../vue/vue.js'></script>
</head>

<body>
  <div id="root">
    {{text}}
  </div>
  <script>
    const app = new Vue({
      // el: '#root',
      // template: '<div>{{text}}</div>',
      data: {
        text: 0
      },
      beforeCreate() {
        console.log(this.$el, 'beforeCreate')
      },
      created() {
        console.log(this.$el, 'created')
      },
      beforeMount() {
        console.log(this.$el, 'beforeMount')
      },
      mounted() {
        console.log(this.$el, 'mounted')
      },
      beforeUpdate() {
        console.log(this, 'beforeUpdate')
      },
      updated() {
        console.log(this, 'updated')
      },
      activated() { // 在组件章节讲解
        console.log(this, 'activated')
      },
      deactivated() { // 在组件章节讲解
        console.log(this, 'deactivated')
      },
      beforeDestroy() {
        console.log(this, 'beforeDestroy')
      },
      destroyed() {
        console.log(this, 'destroyed')
      },
      render(h) {
        throw new TypeError('render error')
        // console.log('render function invoked')
        // return h('div', {}, this.text)
      },
      renderError(h, err) {
        return h('div', {}, err.stack)
      },
      errorCaptured() {
        // 会向上冒泡，并且正式环境可以使用
      }
    })

    app.$mount('#root')
    // setInterval(() => {
    //   app.text = app.text += 1
    // }, 1000)

    setTimeout(() => {
      app.$destroy()
    }, 1000)
  </script>
</body>

</html>